/* ============================= */
/* C O L O R  P A L E T T E */
/* ============================= */

:root {
  --black: #000;
  --white: #fff;

  /* ---- Gradients ---- */
  /* #region gradients */
  --gradient--back-1: radial-gradient(
      50% 50% at 50% 50%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(
      180deg,
      var(--ctp-latte-crust) 0%,
      var(--ctp-latte-mantle) 15%,
      var(--ct-latte-base) 50%
    );
  --gradient--back-2: linear-gradient(
    var(--ctp-macchiato-base) 0%,
    var(--ctp-macchiato-crust) 100%
  );
  /* #endregion gradients */
}

/* #region macchiato */
:root {
  --ctp-macchiato-rosewater: #f4dbd6;
  --ctp-macchiato-rosewater-rgb: 244 219 214;
  --ctp-macchiato-rosewater-hsl: 10.000 57.692% 89.804%;
  --ctp-macchiato-flamingo: #f0c6c6;
  --ctp-macchiato-flamingo-rgb: 240 198 198;
  --ctp-macchiato-flamingo-hsl: 0.000 58.333% 85.882%;
  --ctp-macchiato-pink: #f5bde6;
  --ctp-macchiato-pink-rgb: 245 189 230;
  --ctp-macchiato-pink-hsl: 316.071 73.684% 85.098%;
  --ctp-macchiato-mauve: #c6a0f6;
  --ctp-macchiato-mauve-rgb: 198 160 246;
  --ctp-macchiato-mauve-hsl: 266.512 82.692% 79.608%;
  --ctp-macchiato-red: #ed8796;
  --ctp-macchiato-red-rgb: 237 135 150;
  --ctp-macchiato-red-hsl: 351.176 73.913% 72.941%;
  --ctp-macchiato-maroon: #ee99a0;
  --ctp-macchiato-maroon-rgb: 238 153 160;
  --ctp-macchiato-maroon-hsl: 355.059 71.429% 76.667%;
  --ctp-macchiato-peach: #f5a97f;
  --ctp-macchiato-peach-rgb: 245 169 127;
  --ctp-macchiato-peach-hsl: 21.356 85.507% 72.941%;
  --ctp-macchiato-yellow: #eed49f;
  --ctp-macchiato-yellow-rgb: 238 212 159;
  --ctp-macchiato-yellow-hsl: 40.253 69.912% 77.843%;
  --ctp-macchiato-green: #a6da95;
  --ctp-macchiato-green-rgb: 166 218 149;
  --ctp-macchiato-green-hsl: 105.217 48.252% 71.961%;
  --ctp-macchiato-teal: #8bd5ca;
  --ctp-macchiato-teal-rgb: 139 213 202;
  --ctp-macchiato-teal-hsl: 171.081 46.835% 69.020%;
  --ctp-macchiato-sky: #91d7e3;
  --ctp-macchiato-sky-rgb: 145 215 227;
  --ctp-macchiato-sky-hsl: 188.780 59.420% 72.941%;
  --ctp-macchiato-sapphire: #7dc4e4;
  --ctp-macchiato-sapphire-rgb: 125 196 228;
  --ctp-macchiato-sapphire-hsl: 198.641 65.605% 69.216%;
  --ctp-macchiato-blue: #8aadf4;
  --ctp-macchiato-blue-rgb: 138 173 244;
  --ctp-macchiato-blue-hsl: 220.189 82.813% 74.902%;
  --ctp-macchiato-lavender: #b7bdf8;
  --ctp-macchiato-lavender-rgb: 183 189 248;
  --ctp-macchiato-lavender-hsl: 234.462 82.278% 84.510%;
  --ctp-macchiato-text: #cad3f5;
  --ctp-macchiato-text-rgb: 202 211 245;
  --ctp-macchiato-text-hsl: 227.442 68.254% 87.647%;
  --ctp-macchiato-subtext1: #b8c0e0;
  --ctp-macchiato-subtext1-rgb: 184 192 224;
  --ctp-macchiato-subtext1-hsl: 228.000 39.216% 80.000%;
  --ctp-macchiato-subtext0: #a5adcb;
  --ctp-macchiato-subtext0-rgb: 165 173 203;
  --ctp-macchiato-subtext0-hsl: 227.368 26.761% 72.157%;
  --ctp-macchiato-overlay2: #939ab7;
  --ctp-macchiato-overlay2-rgb: 147 154 183;
  --ctp-macchiato-overlay2-hsl: 228.333 20.000% 64.706%;
  --ctp-macchiato-overlay1: #8087a2;
  --ctp-macchiato-overlay1-rgb: 128 135 162;
  --ctp-macchiato-overlay1-hsl: 227.647 15.455% 56.863%;
  --ctp-macchiato-overlay0: #6e738d;
  --ctp-macchiato-overlay0-rgb: 110 115 141;
  --ctp-macchiato-overlay0-hsl: 230.323 12.351% 49.216%;
  --ctp-macchiato-surface2: #5b6078;
  --ctp-macchiato-surface2-rgb: 91 96 120;
  --ctp-macchiato-surface2-hsl: 229.655 13.744% 41.373%;
  --ctp-macchiato-surface1: #494d64;
  --ctp-macchiato-surface1-rgb: 73 77 100;
  --ctp-macchiato-surface1-hsl: 231.111 15.607% 33.922%;
  --ctp-macchiato-surface0: #363a4f;
  --ctp-macchiato-surface0-rgb: 54 58 79;
  --ctp-macchiato-surface0-hsl: 230.400 18.797% 26.078%;
  --ctp-macchiato-base: #24273a;
  --ctp-macchiato-base-rgb: 36 39 58;
  --ctp-macchiato-base-hsl: 231.818 23.404% 18.431%;
  --ctp-macchiato-mantle: #1e2030;
  --ctp-macchiato-mantle-rgb: 30 32 48;
  --ctp-macchiato-mantle-hsl: 233.333 23.077% 15.294%;
  --ctp-macchiato-crust: #181926;
  --ctp-macchiato-crust-rgb: 24 25 38;
  --ctp-macchiato-crust-hsl: 235.714 22.581% 12.157%;
}
/* #endregion macchiato */

/* #region latte */
:root {
  --ctp-latte-rosewater: #dc8a78;
  --ctp-latte-rosewater-rgb: 220 138 120;
  --ctp-latte-rosewater-hsl: 10.800 58.824% 66.667%;
  --ctp-latte-flamingo: #dd7878;
  --ctp-latte-flamingo-rgb: 221 120 120;
  --ctp-latte-flamingo-hsl: 0.000 59.763% 66.863%;
  --ctp-latte-pink: #ea76cb;
  --ctp-latte-pink-rgb: 234 118 203;
  --ctp-latte-pink-hsl: 316.034 73.418% 69.020%;
  --ctp-latte-mauve: #8839ef;
  --ctp-latte-mauve-rgb: 136 57 239;
  --ctp-latte-mauve-hsl: 266.044 85.047% 58.039%;
  --ctp-latte-red: #d20f39;
  --ctp-latte-red-rgb: 210 15 57;
  --ctp-latte-red-hsl: 347.077 86.667% 44.118%;
  --ctp-latte-maroon: #e64553;
  --ctp-latte-maroon-rgb: 230 69 83;
  --ctp-latte-maroon-hsl: 354.783 76.303% 58.627%;
  --ctp-latte-peach: #fe640b;
  --ctp-latte-peach-rgb: 254 100 11;
  --ctp-latte-peach-hsl: 21.975 99.184% 51.961%;
  --ctp-latte-yellow: #df8e1d;
  --ctp-latte-yellow-rgb: 223 142 29;
  --ctp-latte-yellow-hsl: 34.948 76.984% 49.412%;
  --ctp-latte-green: #40a02b;
  --ctp-latte-green-rgb: 64 160 43;
  --ctp-latte-green-hsl: 109.231 57.635% 39.804%;
  --ctp-latte-teal: #179299;
  --ctp-latte-teal-rgb: 23 146 153;
  --ctp-latte-teal-hsl: 183.231 73.864% 34.510%;
  --ctp-latte-sky: #04a5e5;
  --ctp-latte-sky-rgb: 4 165 229;
  --ctp-latte-sky-hsl: 197.067 96.567% 45.686%;
  --ctp-latte-sapphire: #209fb5;
  --ctp-latte-sapphire-rgb: 32 159 181;
  --ctp-latte-sapphire-hsl: 188.859 69.953% 41.765%;
  --ctp-latte-blue: #1e66f5;
  --ctp-latte-blue-rgb: 30 102 245;
  --ctp-latte-blue-hsl: 219.907 91.489% 53.922%;
  --ctp-latte-lavender: #7287fd;
  --ctp-latte-lavender-rgb: 114 135 253;
  --ctp-latte-lavender-hsl: 230.935 97.203% 71.961%;
  --ctp-latte-text: #4c4f69;
  --ctp-latte-text-rgb: 76 79 105;
  --ctp-latte-text-hsl: 233.793 16.022% 35.490%;
  --ctp-latte-subtext1: #5c5f77;
  --ctp-latte-subtext1-rgb: 92 95 119;
  --ctp-latte-subtext1-hsl: 233.333 12.796% 41.373%;
  --ctp-latte-subtext0: #6c6f85;
  --ctp-latte-subtext0-rgb: 108 111 133;
  --ctp-latte-subtext0-hsl: 232.800 10.373% 47.255%;
  --ctp-latte-overlay2: #7c7f93;
  --ctp-latte-overlay2-rgb: 124 127 147;
  --ctp-latte-overlay2-hsl: 232.174 9.623% 53.137%;
  --ctp-latte-overlay1: #8c8fa1;
  --ctp-latte-overlay1-rgb: 140 143 161;
  --ctp-latte-overlay1-hsl: 231.429 10.048% 59.020%;
  --ctp-latte-overlay0: #9ca0b0;
  --ctp-latte-overlay0-rgb: 156 160 176;
  --ctp-latte-overlay0-hsl: 228.000 11.236% 65.098%;
  --ctp-latte-surface2: #acb0be;
  --ctp-latte-surface2-rgb: 172 176 190;
  --ctp-latte-surface2-hsl: 226.667 12.162% 70.980%;
  --ctp-latte-surface1: #bcc0cc;
  --ctp-latte-surface1-rgb: 188 192 204;
  --ctp-latte-surface1-hsl: 225.000 13.559% 76.863%;
  --ctp-latte-surface0: #ccd0da;
  --ctp-latte-surface0-rgb: 204 208 218;
  --ctp-latte-surface0-hsl: 222.857 15.909% 82.745%;
  --ctp-latte-base: #eff1f5;
  --ctp-latte-base-rgb: 239 241 245;
  --ctp-latte-base-hsl: 220.000 23.077% 94.902%;
  --ctp-latte-mantle: #e6e9ef;
  --ctp-latte-mantle-rgb: 230 233 239;
  --ctp-latte-mantle-hsl: 220.000 21.951% 91.961%;
  --ctp-latte-crust: #dce0e8;
  --ctp-latte-crust-rgb: 220 224 232;
  --ctp-latte-crust-hsl: 220.000 20.690% 88.627%;
}
/* #endregion latte */

/* ============================= */
/* Dark Mode */
/* ============================= */
/* #region darkmode */
:root {
  /* #region text */
  --text-primary: var(--ctp-macchiato-text);
  --text-secondary: var(--ctp-macchiato-subtext0);
  --text-brand: var(--ctp-macchiato-mauve);
  --text-onbrand: var(--ctp-macchiato-base);
  --text-onprimary: var(--ctp-macchiato-text);
  --text-onsecondary: var(--ctp-macchiato-text);
  --text-ontertiary: var(--ctp-macchiato-text);
  /* #endregion text */

  --icon-brand: var(--ctp-macchiato-blue);

  --bg-brand: var(--ctp-macchiato-mauve);
  --bg-primary: var(--ctp-macchiato-surface0);
  --bg-secondary: var(--ctp-macchiato-crust);
  --bg-tertiary: var(--ctp-macchiato-surface2);
  --bg-tertiary-hover: rgb(var(--ctp-macchiato-overlay1-rgb) / 0.5);

  --background-gradient-image: var(--gradient--back-2);
  --focus-ring: var(--ctp-macchiato-blue);

  --shadow-color: rgba(255,255,255,0.17);
  --shadow-height: 0.5px;
}
/* #endregion darkmode */

/* ============================= */
/* Light Mode */
/* ============================= */
/* #region lightmode */
@media (prefers-color-scheme: light) {
  :root {
    /* #region text */
    --text-primary: var(--ctp-latte-text);
    --text-secondary: var(--ctp-latte-overlay0);
    --text-brand: var(--ctp-latte-mauve);
    --text-onbrand: var(--ctp-latte-base);
    --text-onprimary: var(--ctp-latte-text);
    --text-onsecondary: var(--ctp-latte-text);
    --text-ontertiary: var(--ctp-latte-base);
    /* #endregion text */

    --icon-brand: var(--ctp-latte-mauve);

    --bg-brand: var(--ctp-latte-mauve);
    --bg-primary: var(--ctp-latte-base);
    --bg-secondary: var(--ctp-latte-crust);
    --bg-tertiary: var(--ctp-latte-overlay0);

    --background-gradient-image: var(--gradient--back-1);
    --focus-ring: var(--ctp-latte-blue);
  }
}
/* #endregion lightmode */
